<template>
  <div>
      <input type="text" v-model.trim="value" @keypress="add">
      <h1>正在进行中({{noList.length}})</h1>
      <ul>
          <li v-for="(item,index) in noList" :key="index" >
          <input type="checkbox" @click.prevent="gai(item)">
          <input type="text" v-model="item.title">
          <span>{{item.title}}</span>
          </li>
      </ul>
      <h1>已完成({{yesList.length}})</h1>
       <ul>
          <li v-for="(item,index) in yesList" :key="index">
          <input type="checkbox"  checked @click.prevent="gai(item)">
          <input type="text" v-model="item.title">
          <span>{{item.title}}</span>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
data(){
    return{
  value:'',
 list:[],
 


    }

},
computed:{
yesList(){
  let newList = this.list.filter(item=>{
    return item.kai
  })
  return newList
},
noList(){
  let newList = this.list.filter(item=>{
    return !item.kai
  })
  return newList
},

},
methods:{
  add(){
    if(!this.value){
     return
    }
    this.list.push({
      title:this.value,
     kai:false
    })
    this.value=''
  },
  gai(item){
    item.kai = !item.kai
  }
}
}
</script>

<style>

</style>